import React, { Component } from 'react';
import { Dialog, Form, Input, Field, Balloon } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import { encrypt } from 'utils/JSEncrypt';
import docs from 'utils/docs';

// 来源仓库、账号、Access Token
import intl from '../../../../../../../../../locale';

const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    fixedSpan: 18,
  },
};

const TOKEN_ENCRYPT_PUBLIC_KEY =
  'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCgzl8WABpcX06UMaWgxvcjDfTM76CelFMNFSObz/xz1JuHQmgzEJSba4+PljjxpaxhxbaM2bur7mL37F2WecExKBL1H1m5MOfRTwVDE+wXV3j7EukrArzcmusZipxytQEk0FhiLnDpcQxMTH+knLk5piAzLv4MwuUf/a1u109m7wIDAQAB';

export default class AuthForm extends Component {
  constructor(props) {
    super(props);
    this.field = new Field(this);
  }

  onOk = () => {
    this.field.validate((errors) => {
      if (!errors) {
        const formData = this.field.getValues();
        if (formData.token) {
          formData.token = encrypt(formData.token, TOKEN_ENCRYPT_PUBLIC_KEY);
        }
        this.props.onOk(formData);
      }
    });
  };

  render() {
    const { visible, onCancel, url } = this.props;
    const { init } = this.field;
    return (
      <Dialog
        style={{ width: '560px' }}
        title={intl.get({
          id: 'code-assets.settingsMirrorSync.containers.authForm.UpdateAuthorization',
          defaultMessage: '更新授权',
        })}
        visible={visible}
        onOk={this.onOk}
        onCancel={onCancel}
        onClose={onCancel}
      >
        <Form {...formItemLayout} field={this.field} labelTextAlign="left">
          <div>
            <Form.Item
              label={intl.get({
                id: 'code-assets.settingsMirrorSync.containers.authForm.SourceRepository',
                defaultMessage: '来源仓库',
              })}
            >
              <Balloon.Tooltip align="t" trigger={<div className="no-wrap-hidden">{url}</div>}>
                {url}
              </Balloon.Tooltip>
            </Form.Item>
          </div>
          <div>
            <Form.Item
              label={intl.get({
                id: 'code-assets.settingsMirrorSync.containers.authForm.Account',
                defaultMessage: '账号',
              })}
            >
              <Input
                autoFocus
                placeholder={intl.get({
                  id: 'code-assets.settingsMirrorSync.containers.authForm.Enter',
                  defaultMessage: '请输入',
                })}
                {...init('account', {
                  rules: [
                    {
                      required: true,
                      message: intl.get({
                        id: 'code-assets.settingsMirrorSync.containers.authForm.ThisParameterIsRequired',
                        defaultMessage: '该项为必填项',
                      }),
                    },
                  ],
                })}
              />
            </Form.Item>
          </div>
          <div>
            <Form.Item
              label={
                <div>
                  {intl.get({
                    id: 'code-assets.settingsMirrorSync.containers.authForm.PasswordAccessToken',
                    defaultMessage: '密码 / Access Token',
                  })}

                  <Balloon
                    closable={false}
                    trigger={
                      <ButtonIcon
                        name="question-line"
                        style={{
                          marginLeft: 4,
                          display: 'inline-block',
                          position: 'relative',
                          top: '-1px',
                        }}
                      />
                    }
                    align="t"
                  >
                    {intl.get({
                      id: 'code-assets.settingsMirrorSync.containers.authForm.AccessTokenIsGeneratedFor',
                      defaultMessage: 'Access Token 生成，请参考',
                    })}

                    <a href={docs('accessTokenGenerated')} target="_blank" rel="noreferrer">
                      {intl.get({
                        id: 'code-assets.settingsMirrorSync.containers.authForm.HelpDocumentation',
                        defaultMessage: '帮助文档',
                      })}
                    </a>
                  </Balloon>
                </div>
              }
            >
              <Input
                placeholder={intl.get({
                  id: 'code-assets.settingsMirrorSync.containers.authForm.Enter',
                  defaultMessage: '请输入',
                })}
                {...init('token', {
                  rules: [
                    {
                      required: true,
                      message: intl.get({
                        id: 'code-assets.settingsMirrorSync.containers.authForm.ThisParameterIsRequired',
                        defaultMessage: '该项为必填项',
                      }),
                    },
                  ],
                })}
              />
            </Form.Item>
          </div>
        </Form>
      </Dialog>
    );
  }
}
